import *as eCharts from "echarts";
let echartsId = [];
export function packagingEchartsId(id, option) {

    let initEcharts = eCharts.init(document.getElementById(id))
    if (echartsId.indexOf(id) == -1) echartsId.push(initEcharts)
    initEcharts.setOption(option)

    setTimeout(() => {
        window.onresize = function () {
            echartsId.forEach(value => {
                value.resize()
            })
        }
    }, 200);

}

//柱状图
export function barGraph(id) {
    let option;

    option = {
        title: {
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
                name: '2012',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };

    packagingEchartsId(id, option)
}

//饼图
export function pie(id) {
    let option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };

    packagingEchartsId(id, option)

}

//仪表盘

export function dashBoard(id) {
    let option;

    option = {
        series: [
            {
                type: 'gauge',
                axisLine: {
                    lineStyle: {
                        width: 30,
                        color: [
                            [0.3, '#67e0e3'],
                            [0.7, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: -30,
                    length: 8,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -30,
                    length: 30,
                    lineStyle: {
                        color: '#fff',
                        width: 4
                    }
                },
                axisLabel: {
                    color: 'auto',
                    distance: 40,
                    fontSize: 20
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value} km/h',
                    color: 'auto'
                },
                data: [
                    {
                        value: 70
                    }
                ]
            }
        ]
    };

    packagingEchartsId(id, option)

}

//多个柱状图
export function sumBar(id) {
    let option;

    option = {
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
                { product: 'Matcha ', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
                { product: 'Milk ', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
                { product: 'Cheese ', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
                { product: 'Walnut ', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

    packagingEchartsId(id, option)


}